<template>
	<view>
		<block v-if="data !== undefined && data!== null && data .length>0">
			<view class="policy_box">
				<view class="policy_list" v-for="(item,index) in data" :key="index">
					<view class="policy_title">
						<view>{{item.name}}</view>
						<u-icon name="trash-fill" color="#fa3534" size="28" @click="dels(index)"></u-icon>
					</view>
					<view class="info_item">
						<u-radio-group placement="column" iconPlacement="right" >
							<u-radio :customStyle="{marginBottom: '20px'}" v-for="(list,nmb) in item.policy" :key="nmb"
								:label="list.title" :name="list.id"
								@change="radioChange($event,list.product_id,index,nmb)" >
							</u-radio>
						</u-radio-group>
					</view>
					<view class="Switch_box">
						<text>是否设置为默认</text>
						<u-switch v-model="product[index].Switch" @change="change($event,index)"></u-switch>
					</view>
				</view>
			</view>
			<!-- 保存 -->
			<view class="button" @click="subBtn">保存设置</view>
		</block>
		<u-empty v-else mode="list" icon="/static/Empty/data_null.png"></u-empty>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				display: false,
				id: null,
				data: [],
				product_num: 0,
				product: []
			}
		},
		onLoad(e) {
			this.id = e.id
			this._request()
		},
		methods: {
			change(e, index) {
				if (this.product[index].Switch) {
					this.product[index].default = 1
				} else {
					this.product[index].default = 0
				}
			},
			radioChange(e, product_id, index, nmb) {
				this.product[index].product_id = this.data[index].policy[nmb].product_id
				this.product[index].policy_id = e
			},
			dels(index) {
				var that = this
				uni.showModal({
					title: '提交',
					content: '确定要删除吗？',
					success: function(res) {
						if (res.confirm) {
							if (that.product_num > 1) {
								that.data.splice(index,1)
								that.product.splice(index,1)
								that.product_num = that.data.length
							} else {
								that.delsfun(that.id)
							}
						}
					}
				});
			},
			async _request() {
				uni.showLoading({
					title: '加载中'
				});
				const userinfo = uni.getStorageSync('userinfo');
				const {
					data: res
				} = await this.$myHttp5({
					url: 'Team/getAgencyProductPolicy',
					data: {
						id: this.id
					},
					header: {
						'token': userinfo.token
					},
				});
				if (res.code == 1) {
					this.data = res.data
					this.product_num = res.data.length
					this.data.forEach((item, index) => {
						let obj = {
							product_id: null,
							policy_id: null,
							Switch: true,
							default: 1
						}
						this.product.push(obj)
					});
					this.display = true
					uni.hideLoading();
				} else {
					uni.showToast({
						title: res.msg,
						icon: 'none',
						duration: 3000
					})
				}
			},
			subBtn() {
				var that = this
				let product_list = []
				let nums = 0
				this.product.forEach((item, index) => {
					if (item.policy_id > 0) {
						nums++
					}
					let obj = {
						product_id: item.product_id,
						policy_id: item.policy_id,
						default: item.default
					}
					product_list.push(obj)
				});
				if (nums < this.product_num) {
					uni.showToast({
						title: '请选择要设置的政策!',
						duration: 2000,
						icon: 'none'
					});
				} else {
					uni.showModal({
						title: '提交',
						content: '确定要设置选中的政策吗？',
						success: function(res) {
							if (res.confirm) {
								that.saveAgencyProduct(product_list)
							}
						}
					});
				}
			},
			async saveAgencyProduct(product_list) {
				uni.showLoading({
					title: '加载中'
				});
				const userinfo = uni.getStorageSync('userinfo');
				const {
					data: res
				} = await this.$myHttp5({
					url: 'Team/setApplyProductPolicy',
					data: {
						id: this.id,
						product: product_list
					},
					header: {
						'token': userinfo.token
					},
				});
				let _this = this
				if (res.code == 0) {
					uni.showToast({
						title: res.msg,
						duration: 2000,
						icon: 'none',
					});
				} else {
					uni.showToast({
						title: res.msg,
						duration: 2000,
						icon: 'none',
						success() {
							this.timer = setTimeout(() => {
								uni.navigateBack({});
							}, 2000)
						}
					});
				}
			},
			async delsfun(id) {
				var that = this
				const userinfo = uni.getStorageSync('userinfo');
				const {
					data: res
				} = await this.$myHttp5({
					url: 'Team/delPolicyRelation',
					data: {
						id: id
					},
					header: {
						'token': userinfo.token
					}
				});
				uni.showToast({
					title: res.msg,
					duration: 2000,
					icon: 'none',
				});
				setTimeout(function() {
					uni.navigateBack({});
				}, 2000)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.Switch_box {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.info_item {
		width: 100%;
		margin-top: 15rpx;
		font-size: 28rpx;
		border-bottom: #eee solid 1px;
		padding-bottom: 20rpx;
		margin-bottom: 20rpx;
		display: flex;
		flex-direction: column;
	}

	.info_item:last-child {
		border-bottom: none;
		margin-bottom: 0;
	}

	.policy_box {
		padding: 30rpx;
		box-sizing: border-box;
		height: 83vh;
		overflow-y: auto;

		.policy_list {
			padding: 20rpx;
			border-radius: 15rpx;
			box-shadow: 0px 1px 14px -10px #999;
			margin-bottom: 30rpx;


			.policy_title {
				border-bottom: #ebebeb dotted 1px;
				width: 100%;
				display: flex;
				justify-content: space-between;
				padding: 0 0 20rpx 0;
				margin-bottom: 20rpx;
				font-size: 30rpx;
				color: #333;
				font-weight: bold;
				
			}
		
		}
	}

	.button {
		background-color: #018afe;
		width: 90%;
		border-radius: 15rpx;
		font-size: 28rpx;
		padding: 30rpx;
		box-sizing: border-box;
		color: #fff;
		text-align: center;
		// margin-top: 45rpx;
		transition: all 0.5s;
		margin: auto;
	}

	.button:active {
		opacity: 0.8;
	}
</style>